<template>
  <div class="content">
    <el-form>
      <el-form-item label="银行卡：">
        <el-select
          v-model="bankCard"
          placeholder="Select"
          style="width: 240px"
          @change="findBanlane"
          class="input"
        >
          <el-option
            v-for="item in bankList"
            :key="item.id"
            :label="item.bankCard"
            :value="item.bankCard"
          ></el-option>
        </el-select>
        <span>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;可用余额：
          <span style="color: red">{{ price }}</span>
        </span>
      </el-form-item>
      <el-form-item label="请输入转款金额：">
        <el-input
          v-model="money"
          placeholder="请输入转款金额"
          style="width: 150px"
          class="input"
        ></el-input>
      </el-form-item>
      <el-form-item label="请选择定期日期：">
        <el-select v-model="did" style="width: 160px" placeholder="请选择">
          <el-option
            v-for="it in fixedDate"
            :key="it.id"
            :label="it.dname"
            :value="it.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          class="btn"
          type="primary"
          @click="centerDialogVisible = true"
        >
          确认申请
        </el-button>
      </el-form-item>
    </el-form>

    <el-dialog
      v-model="centerDialogVisible"
      title="请输入支付密码"
      width="300px"
      center
    >
      <span>
        '支付成功后30日之内同一个卡号不能再次申请，确认申请吗？'
        '申请结果将发送到您的手机上，请注意查收！2-3个工作日'
        <br />
        <el-input
          v-model="payPassword"
          placeholder="请输入支付密码"
          style="width: 150px;margin-left: 50px"
        ></el-input>
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="depositSave">
            Confirm
          </el-button>
        </div>
      </template>
    </el-dialog>

    <span>
      注意事项：
      <span>
        1、存管银行规定，定期存款的利息计算方式：
        <br />
        2、定期存款日期分为：3月、6月、1年、2年、3年、5年。
        <br />
        利息分别为：1.35%、1.55%、1.75%、、2.75%、3%。
        <br />
        3、转为定期的活期余额，会按照活期的0.035%利率计算利息。结算到原有余额
      </span>
    </span>

    <!--    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#e7008a" fill-opacity="0.54" d="M0,256L15,261.3C30,267,60,277,90,256C120,235,150,181,180,170.7C210,160,240,192,270,224C300,256,330,288,360,266.7C390,245,420,171,450,138.7C480,107,510,117,540,144C570,171,600,213,630,197.3C660,181,690,107,720,85.3C750,64,780,96,810,133.3C840,171,870,213,900,240C930,267,960,277,990,277.3C1020,277,1050,267,1080,234.7C1110,203,1140,149,1170,149.3C1200,149,1230,203,1260,234.7C1290,267,1320,277,1350,288C1380,299,1410,309,1425,314.7L1440,320L1440,320L1425,320C1410,320,1380,320,1350,320C1320,320,1290,320,1260,320C1230,320,1200,320,1170,320C1140,320,1110,320,1080,320C1050,320,1020,320,990,320C960,320,930,320,900,320C870,320,840,320,810,320C780,320,750,320,720,320C690,320,660,320,630,320C600,320,570,320,540,320C510,320,480,320,450,320C420,320,390,320,360,320C330,320,300,320,270,320C240,320,210,320,180,320C150,320,120,320,90,320C60,320,30,320,15,320L0,320Z"></path></svg>-->
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { apply, findBank, findDate, findPrice } from '@/api/bank'
import { ElMessage } from 'element-plus'
import router from '@/router'

const bankList = ref([])
const bankCard = ref('')
const price = ref('')
function findBankList() {
  findBank().then(res => {
    bankList.value = res.data
    if (res.data.length>0){
      for (let i = 0; i < res.data.length; i++) {
        if (res.data[i].tid == 2) {
          bankCard.value = res.data[i].bankCard
          console.log(bankCard.value)
        }
      }
      findBanlane()
    }
  })
}
onMounted(() => {
  findBankList()
  findDateList()
})

//获取改卡号的活期余额
function findBanlane() {
  findPrice(bankCard.value).then(res => {
    if (res.code === 500) {
      if (price.value ==0){
        ElMessage({
          message: res.message,
          type: 'error',
        })
      }

      price.value = 0
    } else {
      price.value = res.data[0].balance
      console.log(res.data)
    }
  })
}
//定期存款日期
const fixedDate = ref([])
const did = ref()
const money = ref('')
function findDateList() {
  findDate().then(res => {
    fixedDate.value = res.data
    console.log(fixedDate.value)
  })
}

//输入支付密码
const payPassword = ref('')
const centerDialogVisible = ref(false)

//申请转存
function depositSave() {
  apply(bankCard.value, money.value, did.value, payPassword.value).then(res => {
    if (res.code === 200) {
      ElMessage({
        message: res.message,
        type: 'success',
      })
      centerDialogVisible.value = false
      router.go(0)
    } else {
      ElMessage({
        message: res.message,
        type: 'error',
      })
      centerDialogVisible.value = true
    }
  })
}
//showpay
</script>

<style scoped>
/*.content {*/
/*  width: 100%;*/
/*  height: 1800px;*/
/*  !*padding: 100px 0 0 500px;*!*/
/*  !*background-color: black;*!*/
/*}*/
/*.mflow-box{*/
/*  width: 500px;*/
/*  height: 100px;*/
/*  !*background-color: #ffffff;*!*/
/*  border-radius: 20px;*/
/*  position: relative;*/
/*  overflow: hidden;*/
/*}*/
/*.mflow-box::before{*/
/*  content: '';*/
/*  width: calc(100% - 8px);*/
/*  height: calc(100% - 8px);*/
/*  background-color: black;*/
/*  border-radius: 20px;*/
/*  position: absolute;*/
/*  top: 3px;*/
/*  left: 3px;*/
/*  z-index: 3;*/
/*}*/
/*.mflow-box::after{*/
/*  content: '';*/
/*  width: 300%;*/
/*  height: 300%;*/
/*  background-image: conic-gradient(#EEEEEE22,#f16b41,#f0C237,#409eff,pink,blue 80%);*/
/*  border-radius: 20px;*/
/*  position: absolute;*/
/*  top: -100%;*/
/*  left: -100%;*/
/*  z-index: 1;*/
/*  animation: rotate 3s linear infinite;*/
/*}*/

/*@keyframes rotate {*/
/*  100%{*/
/*    transform: rotate(360deg);*/
/*  }*/
/*}*/

/*.mflow-box span{*/
/*  color: #f0C237;*/
/*  top: 3px;*/
/*  left: 3px;*/
/*  width: 100%;*/
/*  font-size: 28px;*/
/*  text-align: center;*/
/*  line-height: 110px;*/
/*  z-index: 1;*/
/*}*/
.content {
  background-color: #f0f9eb;
  margin: 0;
  width: 100%;
  height: 100%;
}

form {
  background-image: linear-gradient(104deg, #f1efc7, #ecf2f9);
  width: 31.25rem;
  text-align: center;
  box-shadow: #666 0px 0px 10px;
  padding-left: 20px;
}

div {
  line-height: 25px;
}

.btn {
  background-image: linear-gradient(104deg, #f1efc7, #ecf2f9);
  width: 160px;
  height: 40px;
  margin-left: 150px;
  margin-right: 15px;
  color: black;
}

.input {
  text-align: center;
  width: 230px;
  height: 30px;
}

input[type] {
  background-color: transparent;
}
</style>
